<script setup>
import {reactive, toRefs, ref, defineProps, defineEmits, defineExpose} from 'vue'
import {ElMessage} from "element-plus"
import { GetInfo, Insert, Update } from "@/api/project.js";
import { useStore } from 'vuex'

const store = useStore()

const props = defineProps({
  showDialog: Boolean
})
const {showDialog} = toRefs(props)

const emits = defineEmits(['closeHandle'])
const closeDialog = (hasChange) => {
  emits('closeHandle', hasChange)
}

const titleShow = ref('')

const editForm = ref({})
const init = (title, id) => {
  titleShow.value = title;
  if (id) {
    GetInfo(id).then(res => {
      editForm.value = res.data
    })
  } else {
    editForm.value = {
      name: '',
      description: '',
      startTime: '',
      endTime: '',
      actualTime: null,
      status: 1,
      budget: 0.00
    }
  }
}
const resetForm = () => {
  editForm.value = {
    name: '',
    description: '',
    startTime: '',
    endTime: '',
    actualTime: null,
    status: 1,
    budget: 0.00
  };
}
defineExpose({init, resetForm})

const ruleForm = ref()
const submitForm = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      if (editForm.value.id) {
        editForm.value.startTime = formatDate(editForm.value.startTime);
        editForm.value.endTime = formatDate(editForm.value.endTime);
        if (editForm.value.actualTime) {
          editForm.value.actualTime = formatDate(editForm.value.actualTime);
        }
        Update(editForm.value).then((res) => {
          ElMessage({message: '更新成功', type: 'success'})
          closeDialog(true)
        })
      } else {
        const { id, createTime, updateTime, startTime, endTime, actualTime, ...insertData } = editForm.value;
        insertData.adminId = store.getters.userInfo.id;
        insertData.startTime = formatDate(startTime);
        insertData.endTime = formatDate(endTime);
        insertData.actualTime = actualTime ? formatDate(actualTime) : null;
        Insert(insertData).then((res) => {
          ElMessage({message: '新增成功', type: 'success'})
          closeDialog(true)
        })
      }
    }
  })
}

const rules = reactive({
  name: [
    {required: true, message: '请输入项目名称', trigger: 'blur'}
  ],
  description: [
    {required: true, message: '请输入项目描述', trigger: 'blur'}
  ],
  startTime: [
    {required: true, message: '请选择开始日期', trigger: 'change'}
  ],
  endTime: [
    {required: true, message: '请选择预计结束日期', trigger: 'change'}
  ],
  budget: [
    {required: true, message: '请输入项目预算', trigger: 'blur'}
  ]
})

// 日期格式化函数
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
</script>

<template>
  <!--项目编辑对话框-->
  <el-drawer
      :title="titleShow"
      width="600px"
      v-model="showDialog"
      :before-close="closeDialog"
  >
    <el-form :model="editForm" :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-editForm">
      <el-form-item label="项目名称" prop="name" label-width="100px">
        <el-input v-model="editForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目描述" prop="description" label-width="100px">
        <el-input v-model="editForm.description" autocomplete="off" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="开始日期" prop="startTime" label-width="100px">
        <el-date-picker v-model="editForm.startTime" type="datetime" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="预计结束日期" prop="endTime" label-width="100px">
        <el-date-picker v-model="editForm.endTime" type="datetime" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="项目状态" prop="status" label-width="100px">
        <el-select v-model="editForm.status" placeholder="选择状态">
          <el-option label="规划中" :value="1"></el-option>
          <el-option label="进行中" :value="2"></el-option>
          <el-option label="已完成" :value="3"></el-option>
          <el-option label="延期" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目预算" prop="budget" label-width="100px">
        <el-input v-model="editForm.budget" autocomplete="off" type="number" placeholder="输入预算"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即{{titleShow}}</el-button>
        <el-button @click="closeDialog">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>